import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,ImageBackground,Dimensions
} from 'react-native';
const {height, width} = Dimensions.get('window');
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import DeviceStorage from '../../common/DeviceStorage';
import {BASEURL} from '../../api/api'
const dismissKeyboard = require('dismissKeyboard');
export default class VipCard extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'代金券',
      headerRight:(<View></View>),
			headerLeft:<BackButton navigation = {navigation}/>,
			headerStyle:{
				backgroundColor:'#272727'
			},
			headerTitleStyle:{
				color:'white',
				flex:1,
				textAlign:'center',
			}
    }
	};
	constructor(props){
		super(props);
		this.state = {
			userInfo:{},
      type:'1',
      data:[

      ]
		}
	}
	_typeClick(type){
		this.setState({
			type:type
		})
	}
	renderMiddle(){
		let view = [];
		let data = [
			{
				money:'100',
				useLimit:'1000',
				useTime:'2019-10-10'
			}
    ];
    let {type} = this.state;
    let textColor = '#000';
    let moneyColor = '#BCAC48';
    let img = require('../../images/mine/icon_used.png')
    if(type !=1 ) {
      textColor = '#888';
      moneyColor = '#DFD8B2';
    }
    if(type == 3) img = require('../../images/mine/icon_overdue.png')
    
		for(let i=0; i<data.length; i++){
			let item = data[i];
			view.push(
        <View key={i} style={{backgroundColor:'#f0f0f0'}}>
          <ImageBackground  resizeMode='contain' style={{width:width,height:width*0.253,paddingTop:10,paddingBottom:10,
            flexDirection:'row',justifyContent:'space-between',position:'relative'}} 
            source={require('../../images/mine/icon_row_bg.png')} >
            <View style={{borderWidth:1,width:width*0.55,borderColor:'#888',marginLeft:35,
              flexDirection:'row',alignItems:'center',justifyContent:'space-around'}}>
              <View style={{flexDirection:'row',alignItems:'baseline'}}>
                <Text style={{color:moneyColor}}>￥</Text><Text style={{fontSize:24,color:moneyColor}}>{item.money}</Text>
              </View>
              <View style={{justifyContent:'space-around'}}>
                <Text style={{color:textColor}}>满{item.useLimit}元可用</Text>
                <Text style={{color:textColor}}>有效期：{item.useTime}</Text>
              </View>
              
            </View>
            <View style={{
              width:StyleSheet.hairlineWidth,backgroundColor:'#000',marginLeft:type==1?17:22}}></View>
            <View style={{justifyContent:'center',alignItems:'center',borderWidth:0,marginRight:type==1?35:15}}>
              {type==1?
              <TouchableOpacity >
                <Text style={{fontWeight:'bold',fontSize:16,color:'#555'}}>立即使用</Text>
              </TouchableOpacity>
              :
              <Image source={img} style={{width:90,height:90}}/>
              }
            </View>
          </ImageBackground>
        </View>
			)
		}
		return view;
	}
	render(){
		let type = this.state.type;
		return(
			<View style={{flex:1,backgroundColor:'#f0f0f0'}} >
				<ImageBackground style={[styles.slideView]} source={require('../../images/mine/card_bg.png')}>
					<MiddelView text='可使用' textStyle={{color:type==1?'#EFE486':'#555'}} press={()=>this._typeClick(1)}
						height={type==1?2:0}  />
					<MiddelView  text='已使用'  textStyle={{color:type==2?'#EFE486':'#555'}} press={()=>this._typeClick(2)}
						 height={type==2?2:0} />
					<MiddelView  text='已作废'  textStyle={{color:type==3?'#EFE486':'#555'}}  press={()=>this._typeClick(3)}
						 height={type==3?2:0} /> 
        </ImageBackground>
				<View>
					{this.renderMiddle()}
				</View>
				<View style={styles.content}>
          <Image source={require('../../images/mine/icon_face.png')} style={{width:60,height:60,marginBottom:10}}/>
					<Text style={{color:'#888',fontSize:15}}>暂无可使用优惠券...</Text>
				</View>
			</View>
		)
	}
}
class MiddelView extends Component{
  render(){
    return(
      <TouchableOpacity  activeOpacity={0.5} onPress={this.props.press}>
        <View style={[styles.middelView,this.props.viewStyle]}>
          <Text style={[styles.middleText,this.props.textStyle]} >{this.props.text}</Text>
					<View style={{height:this.props.height,width:24,backgroundColor:'#C5AA47'}}></View>
        </View>
      </TouchableOpacity>
    )
  }
}
const styles = StyleSheet.create({
	content:{
		flex:1,
		backgroundColor:'#f0f0f0',
		justifyContent:'center',
		alignItems:'center'
	},
	middleText:{
    paddingTop:0,
    paddingBottom:4,
    fontSize:16,
  },
	middelView:{
    justifyContent:'center',
    alignItems:'center',
    borderColor:'red',
    borderBottomWidth:0,
  },
	slideView:{
		height:100,
		width:width,
		paddingTop:-10,
		paddingBottom:20,
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
    // borderWidth:1,
    // borderColor:'green',
  },
})